<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-card
          class="my-card"
          shadow="never"
          style="min-height: calc(100vh - 80px)"
        >
          <div class="plans-wrap">
            <div class="plans-left">
              <!-- <div class="plans-left-title">
                  <el-button type="warning">重置</el-button>
                  <el-button type="primary">创建拟调方案</el-button>
                </div> -->
              <div class="orgdetail-title">
                <i class="el-icon-s-fold orgdetail-icon"></i>
                调整前
              </div>
              <div class="plans-left-content">
                <el-table
                  v-loading="beforeLoading"
                  :data="beforeHeaderTableData"
                  :show-header="false"
                >
                  <el-table-column prop="orgName" min-width="110px">
                    <template scope="scope">
                      <span class="orgNameCss">{{scope.row.orgName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="prepareTotal" align="center">
                    <template slot-scope="scope">
                      <span>编制总数<br />{{ scope.row.prepareTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="actualNum" align="center">
                    <template slot-scope="scope">
                      <span>实际人数<br />{{ scope.row.actualNum }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="overTotal" align="center">
                    <template slot-scope="scope">
                      <span>超空编数<br />{{ scope.row.overTotal }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  v-loading="beforeLoading"
                  :data="tableData"
                  :show-header="false"
                  height="520px"
                  :row-class-name="tableRowClassName"
                  @cell-click="headerChange"
                >
                  <el-table-column prop="orgName" min-width="110px">
                    <template scope="scope"
                      ><span class="orgNameCss">{{
                        scope.row.orgName
                      }}</span></template
                    >
                  </el-table-column>
                  <el-table-column prop="prepareTotal" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.remark"
                        >编制总数<br />{{ scope.row.prepareTotal }}</span
                      >
                      <span v-else>{{ scope.row.prepareTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="actualNum" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.remark"
                        >实际人数<br />{{ scope.row.actualNum }}</span
                      >
                      <span v-else>{{ scope.row.actualNum }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="overTotal" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.remark"
                        >超空编数<br />{{ scope.row.overTotal }}</span
                      >
                      <span v-else>{{ scope.row.overTotal }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="plans-center">
              <div class="orgdetail-title">
                <i
                  class="el-icon-s-unfold orgdetail-icon"
                  style="color: #3cd5b2"
                ></i>
                调整后
              </div>
              <div class="plans-center-content" style="margin-top: 10px">
                <el-table
                  v-loading="afterLoading"
                  :data="afterHeaderTableData"
                  :show-header="false"
                >
                  <el-table-column prop="orgName" min-width="110px">
                    <template scope="scope">
                      <span class="orgNameCss">{{scope.row.orgName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="prepareTotal" align="center">
                    <template slot-scope="scope">
                      <span>编制总数<br />{{ scope.row.prepareTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="actualNum" align="center">
                    <template slot-scope="scope">
                      <span>实际人数<br />{{ scope.row.actualNum }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="overTotal" align="center">
                    <template slot-scope="scope">
                      <span>超空编数<br />{{ scope.row.overTotal }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  v-loading="afterLoading"
                  :data="contentData"
                  :show-header="false"
                  height="520px"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column prop="orgName" min-width="110px">
                  </el-table-column>
                  <el-table-column prop="prepareTotal" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.remark"
                        >编制总数<br />{{ scope.row.prepareTotal }}</span
                      >
                      <span v-else>{{ scope.row.prepareTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="actualNum" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.remark"
                        >实际人数<br />{{ scope.row.actualNum }}</span
                      >
                      <span v-else>{{ scope.row.actualNum }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="overTotal" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.remark"
                        >超空编数<br />{{ scope.row.overTotal }}</span
                      >
                      <span v-else>{{ scope.row.overTotal }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card
          class="my-card"
          shadow="never"
          style="min-height: calc(100vh - 80px)"
        >
          <div class="plan-right">
            <div
              class="plan-right-title"
              style="padding-bottom: 10px; font-size: 16px; font-weight: bold"
            >
              <span style="color: #0e88c2; line-height: 30px">
                <i
                  class="el-icon-document"
                  style="font-weight: bold; font-size: 18px"
                ></i>
                变动记录表
              </span>
              <el-button
                type="success"
                @click="submitForm"
                size="mini"
                icon="el-icon-suitcase-1"
                v-if="handleType === 'edit'"
                style="float: right"
                >保存此方案</el-button
              >
            </div>
            <div class="plan-right-content">
              <div
                class="record-wrap"
                style="
                  font-size: 14px;
                  border: 1px solid #eaeefb;
                  padding: 10px 10px 10px 10px;
                  background-color: #f9f9fc;
                  border-radius: 4px;
                "
              >
                <div
                  class="record-list"
                  v-for="(item, index) in recordData"
                  :key="item.id"
                  style="padding-bottom: 10px"
                >
                  <span style="font-weight: bold">{{ index }}.</span>
                  <span
                    class="item-list"
                    style="color: #666666; line-height: 20px"
                  >
                    <span v-for="(i, index1) in item" :key="index1">
                      <span v-if="i.organType">
                        {{ i.fromOrgName
                        }}<span style="font-weight: bold"
                          >（{{ i.changeNum }}）个{{ i.organType }}</span
                        >类编制调整到{{ i.toOrgName }};
                        <br />
                      </span>
                      <span v-else>
                        {{ i.fromOrgName
                        }}<span
                          style="
                            font-weight: bold;
                            text-decoration: underline;
                            color: red;
                          "
                          @click="personRecord(i.personList)"
                          >（{{ i.changeNum }}）个人员</span
                        >调整到{{ i.toOrgName }};
                        <br />
                      </span>
                    </span>
                  </span>
                </div>
              </div>
              <div
                style="
                  background-color: #f9f9fc;
                  padding: 10px;
                  border-radius: 4px;
                  margin-top: 10px;
                "
              >
                <el-form
                  :column="2"
                  style="margin-top: 0px"
                  label-width="80px"
                  :rules="planRules"
                >
                  <el-form-item label="方案名称" prop="" required>
                    <el-input
                      v-model="planName"
                      placeholder="请输入方案名称"
                      :disabled="handleType === 'detail'"
                    ></el-input>
                  </el-form-item>
                  <!--<el-form-item label="创建日期">{{ createTime }}</el-form-item>-->
                </el-form>

                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="备注：简述20个字"
                  v-model="remark"
                  :disabled="handleType === 'detail'"
                >
                </el-input>
              </div>

              <el-form :column="2">
                <el-tabs
                  v-model="tabTitle"
                  type="card"
                  @tab-click="tabClick"
                  style="background-color: #ffffff; margin-top: 10px"
                  v-loading="loading"
                  element-loading-text="文件下载中"
                >
                  <el-tab-pane label="方案生成依据" name="create"></el-tab-pane>
                  <el-tab-pane label="方案生效依据" name="effect"></el-tab-pane>
                  <el-button
                    style="float: right; margin-right: 10px; margin-bottom: 5px"
                    size="small"
                    type="primary"
                    plain
                    icon="el-icon-upload2"
                    @click="uploadFileBtn"
                    v-if="handleType === 'edit'"
                    >上传文件</el-button
                  >
                  <el-table
                    v-loading="fileLoading"
                    :data="
                      tabTitle === 'create'
                        ? createFileDataList
                        : effectFileDataList
                    "
                  >
                    <el-table-column label="文件名称" min-width="100">
                      <template slot-scope="scope">
                        <a
                          @click="handleDownFile(scope.row)"
                          style="color: #4e86ff; cursor: pointer"
                          >{{ scope.row.fileName }}</a
                        >
                      </template>
                    </el-table-column>
                    <el-table-column
                      label=""
                      class-name="small-padding fixed-width"
                      width="190"
                    >
                      <template slot-scope="scope">
                        <el-button-group>
                          <el-button
                            size="mini"
                            type="text"
                            @click="handleDelete(scope.row)"
                            v-if="handleType === 'edit'"
                            style="color: red"
                            >删除</el-button
                          >
                        </el-button-group>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tabs>
              </el-form>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="方案名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入方案" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="fileTitle" :visible.sync="fileVisible" width="500px">
      <el-form ref="fileForm" :model="fileForm" label-width="80px">
        <el-form-item label="文件名称" prop="approvalNo">
          <el-input
            v-model="fileForm.fileName"
            placeholder="上传文件时自动获取文件名称"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="批准编号" prop="approvalNo">
          <el-input
            v-model="fileForm.approvalNo"
            placeholder="请输入批准编号"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="批准机关" prop="approvalOffice">
          <el-input
            v-model="fileForm.approvalOffice"
            placeholder="请输入批准机关"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="调整事项" prop="determineThing">
          <el-input
            v-model="fileForm.determineThing"
            placeholder="请输入调整事项"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="发文日期" prop="sendTime">
          <el-date-picker
            type="date"
            placeholder="请选择发文日期"
            v-model="fileForm.sendTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上传文件" prop="fileName">
          <el-upload
            ref="upload"
            :limit="1"
            :data="fileForm"
            :action="upload.url"
            :headers="upload.headers"
            :file-list="upload.fileList"
            :on-change="handleSelect"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div class="el-upload__tip" slot="tip" v-if="showTip">
              请上传
              <template v-if="fileType">
                格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
              </template>
              的文件
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitFileForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="fileVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!--PDF 预览-->
    <el-dialog
      title="PDF 预览"
      :visible.sync="viewVisible"
      width="60%"
      center
      @close="closeDialog"
    >
      <div>
        <el-button
          style="margin-left: 10px; margin-bottom: 15px"
          type="primary"
          size="small"
          @click="downloadPdf"
        >
          下载文件
        </el-button>
        <span style="float: right; margin-bottom: 15px"
          ><el-button type="primary" size="small" @click.stop="previousPage">
            上一页
          </el-button>
          <el-button type="primary" size="small" @click.stop="nextPage">
            下一页
          </el-button>
          <span>当前第{{ pdfPage }}页 / 共{{ pageCount }}页</span></span
        >
      </div>

      <div>
        <pdf
          :src="src"
          :page="pdfPage"
          @num-pages="pageCount = $event"
          @page-loaded="pdfPage = $event"
          style="display: inline-block; width: 100%"
        ></pdf>
      </div>
    </el-dialog>

    <!--  人员调整详情-->
    <el-dialog
      title="调整人员详情"
      :visible.sync="personRecordDialog"
      width="500px"
    >
      <el-table
        :data="personRecordData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="姓名" min-width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="警号" min-width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.policeNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" min-width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.contactPhone }}</span>
          </template>
        </el-table-column>
        <div slot="footer" class="dialog-footer">
          <el-button @click="personRecordDialog = false">关 闭</el-button>
        </div>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getAdjustAfter } from "@/api/orgadjust/detailed.js";
import {
  deletePlanFile,
  downloadPlanFile,
  getPlanFile,
  savePlan,
  updatePlan,
} from "@/api/modules/plans.js";
import { getToken } from "@/utils/auth";
import { deletePerson } from "@/api/modules/person";
import pdf from "vue-pdf";
import { getSnowFlakeId } from "@/api/orgadjust";
export default {
  name: "Detailed",
  components: { pdf },
  props: {
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["doc", "docx", "pdf", "PDF"],
    },
  },
  data() {
    return {
      fileList: [],
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/planFile",
        // 上传的文件列表
        fileList: [],
      },
      beforeLoading: false,
      afterLoading: false,
      fileLoading: false,
      tempId: "",
      planId: "",
      planCode: "",
      planName: "",
      createTime: "",
      handleType: "",
      tableData: [],
      contentData: [],
      beforeHeaderTableData: [],
      afterHeaderTableData: [],
      // 变动记录表
      recordData: [],
      createFileDataList: [],
      effectFileDataList: [],
      tabTitle: "create",
      fileTitle: "机构编制事项变动情况详情单",
      remark: "", // 备注
      title: "",
      form: {
        name: "",
      },
      fileForm: {
        fileName: "",
        approvalNo: "",
        approvalOffice: "",
        sendTime: "",
        fileType: "",
        tempVersionId: "",
        planId: "",
        determineThing: "",
      },
      planRules: {
        planName: [
          { required: true, message: "请输入方案名称", trigger: "blur" },
        ],
      },
      fileVisible: false,
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: "请输入方案名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      dialogVisible: false, // 弹框显示隐藏
      fileQuery: {
        fileType: "",
        tempVersionId: "",
      },
      //PDF预览
      viewVisible: false,
      src: null,
      pdfPage: 1,
      pageCount: 0,
      pdfBlob: "",
      loading: false,
      personRecordDialog: false,
      personRecordData: [],
      pdfFilePath: "",
      pdfFileName: "",
      version: "",
    };
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && this.fileType;
    },
  },
  created() {
    this.getData();
  },
  methods: {
    downloadPdf() {
      downloadPlanFile({ filePath: this.pdfFilePath }).then((res) => {
        let blob = new Blob([res]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = this.pdfFileName; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
        this.loading = false;
        if (res.success) {
          this.$message.success("文件下载成功");
        }
      });
    },
    //PDF预览
    previewPDF(url) {
      this.src = pdf.createLoadingTask(url);
      this.viewVisible = true;
    },
    //关闭窗口初始化PDF页码
    closeDialog() {
      this.pdfPage = 1;
    },

    //PDF改变页数
    previousPage() {
      var p = this.pdfPage;
      p = p > 1 ? p - 1 : this.pageCount;
      this.pdfPage = p;
    },
    nextPage() {
      var p = this.pdfPage;
      p = p < this.pageCount ? p + 1 : 1;
      this.pdfPage = p;
    },
    handleAdd() {
      this.upload.fileList = [];
    },
    handleUpdate(row) {
      this.upload.fileList = [
        { name: this.form.fileName, url: this.form.filePath },
      ];
    },
    handleDownFile(row) {
      if (
        row.fileName.indexOf("pdf") !== -1 ||
        row.fileName.indexOf("PDF") !== -1
      ) {
        this.pdfFilePath = row.filePath;
        this.pdfFileName = row.fileName;
        downloadPlanFile({ filePath: row.filePath }).then((res) => {
          let blob = new Blob([res], { type: "application/pfd" });
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          this.previewPDF(href);
        });
      } else {
        this.loading = true;
        downloadPlanFile({ filePath: row.filePath }).then((res) => {
          let blob = new Blob([res]);
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = row.fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
          this.loading = false;
          if (res.success) {
            this.$message.success("文件下载成功");
          }
        });
      }
    },
    personRecord(personList) {
      this.personRecordDialog = true;
      this.personRecordData = personList;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    tabClick(tab) {
      this.tabTitle = tab.name;
    },
    handleDelete(row) {
      this.$confirm(
        "点击确认后，此文件会被永久删除, 请确认此项操作？",
        "删除文件",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deletePlanFile(row.id).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getPlanFileList();
            }
          });
        })
        .catch(() => {});
    },
    handleSelect(file, fileList) {
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$modal.msgError(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          this.upload.fileList = [];
          return false;
        } else {
          this.fileForm.fileName = file.name;
        }
      }
      return true;
    },
    submitFileForm() {
      this.fileVisible = false;
      this.submitUpload();
    },
    getPlanFileList() {
      this.fileQuery.fileType = this.tabTitle;
      if (this.planId) {
        this.fileQuery.planId = this.planId;
      } else {
        this.fileQuery.tempVersionId = this.tempId;
      }
      getPlanFile(this.fileQuery).then((res) => {
        if (this.tabTitle === "create") {
          this.createFileDataList = res.data;
        } else {
          this.effectFileDataList = res.data;
        }
      });
    },
    uploadFileBtn() {
      this.upload.fileList = [];
      this.fileVisible = true;
      this.fileForm = {
        fileName: "",
        approvalNo: "",
        approvalOffice: "",
        sendTime: "",
        fileType: "",
        tempVersionId: "",
        determineThing: "",
      };
      this.fileForm.fileType = this.tabTitle;
      this.fileForm.tempVersionId = this.tempId;
      if (this.planId) {
        this.fileForm.planId = this.planId;
      }
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.getPlanFileList();
      this.upload.isUploading = false;
      this.form.filePath = response.url;
      this.msgSuccess(response.msg);
    },
    /**
     * 左侧表格点击跳转
     */
    headerChange(row, column, cell, event) {
      if (this.handleType !== "detail") {
        if (column.property === "orgName" && row.orgId) {
          this.$router.push({
            path: "/plan/planChange",
            query: {
              orgId: row.orgId,
              orgName: row.orgName,
              planCode: this.planCode,
              remark: this.remark,
              createTime: this.createTime,
              planName: this.planName,
              planId: this.planId,
            },
          });
        }
      }
    },

    getData() {
      this.beforeLoading = true
      this.afterLoading = true
      this.fileLoading = true
      var params = this.$route.query;
      if (JSON.stringify(params) === "{}") {
        getSnowFlakeId({}).then((response) => {
          if (response.code == 200) {
            this.tempId = response.data.tempVersionId;
            this.version = response.data.version;
            localStorage.setItem("tempId", this.tempId);
            localStorage.setItem("version", this.version);
          }
        });
      } else {
        this.tempId = params.tempId;
      }
      getPlanFile({ tempVersionId: this.tempId, fileType: "create" }).then(
        (res) => {
          this.createFileDataList = res.data;
          this.fileLoading = false
        }
      );
      getPlanFile({ tempVersionId: this.tempId, fileType: "effect" }).then(
        (res) => {
          this.effectFileDataList = res.data;
        }
      );
      getAdjustAfter({
        orgId: localStorage.getItem("orgId"),
        tempVersionId: params.tempId,
      }).then((res) => {
        var adjustFront = res.data.adjustFront;
        var adjustAfter = res.data.adjustAfter;
        var record = res.data.record;
        if (Object.getOwnPropertyNames(params).length !== 1) {
          this.planCode = params.planCode;
          this.remark = params.remark;
          this.createTime = params.createTime;
          this.planName = params.planName;
          this.planId = params.planId;
          this.handleType =
            params.handleType === undefined || params.handleType === "edit"
              ? "edit"
              : "detail";
        } else {
          this.createTime = res.data.createTime;
        }

        this.beforeHeaderTableData.push({
          orgName: "目前状态",
          prepareTotal: adjustFront.prepareTotal,
          actualNum: adjustFront.actualNum,
          overTotal: adjustFront.overTotal,
          remark: true,
        });
        this.tableData.push({
          orgName: "内设机构",
          prepareTotal: adjustFront.internalList.prepareTotal,
          actualNum: adjustFront.internalList.actualNum,
          overTotal: adjustFront.internalList.overTotal,
          remark: true,
        });
        this.tableData.push.apply(
          this.tableData,
          adjustFront.internalList.typeDetail
        );
        this.tableData.push({
          orgName: "下设机构",
          prepareTotal: adjustFront.consistsList.prepareTotal,
          actualNum: adjustFront.consistsList.actualNum,
          overTotal: adjustFront.consistsList.overTotal,
          remark: true,
        });
        this.tableData.push.apply(
          this.tableData,
          adjustFront.consistsList.typeDetail
        );
        this.tableData.push({
          orgName: "派出机构",
          prepareTotal: adjustFront.sendList.prepareTotal,
          actualNum: adjustFront.sendList.actualNum,
          overTotal: adjustFront.sendList.overTotal,
          remark: true,
        });
        this.tableData.push.apply(
          this.tableData,
          adjustFront.sendList.typeDetail
        );
        this.tableData.push({
          orgName: "事业机构",
          prepareTotal: adjustFront.careerList.prepareTotal,
          actualNum: adjustFront.careerList.actualNum,
          overTotal: adjustFront.careerList.overTotal,
          remark: true,
        });
        this.tableData.push.apply(
          this.tableData,
          adjustFront.careerList.typeDetail
        );
        this.afterHeaderTableData.push({
          orgName: "拟调整方案",
          prepareTotal: adjustAfter.prepareTotal,
          actualNum: adjustAfter.actualNum,
          overTotal: adjustAfter.overTotal,
          remark: true,
        });
        this.contentData.push({
          orgName: "内设机构",
          prepareTotal: adjustAfter.internalList.prepareTotal,
          actualNum: adjustAfter.internalList.actualNum,
          overTotal: adjustAfter.internalList.overTotal,
          remark: true,
        });
        this.contentData.push.apply(
          this.contentData,
          adjustAfter.internalList.typeDetail
        );
        this.contentData.push({
          orgName: "下设机构",
          prepareTotal: adjustAfter.consistsList.prepareTotal,
          actualNum: adjustAfter.consistsList.actualNum,
          overTotal: adjustAfter.consistsList.overTotal,
          remark: true,
        });
        this.contentData.push.apply(
          this.contentData,
          adjustAfter.consistsList.typeDetail
        );
        this.contentData.push({
          orgName: "派出机构",
          prepareTotal: adjustAfter.sendList.prepareTotal,
          actualNum: adjustAfter.sendList.actualNum,
          overTotal: adjustAfter.sendList.overTotal,
          remark: true,
        });
        this.contentData.push.apply(
          this.contentData,
          adjustAfter.sendList.typeDetail
        );
        this.contentData.push({
          orgName: "事业机构",
          prepareTotal: adjustAfter.careerList.prepareTotal,
          actualNum: adjustAfter.careerList.actualNum,
          overTotal: adjustAfter.careerList.overTotal,
          remark: true,
        });
        this.contentData.push.apply(
          this.contentData,
          adjustAfter.careerList.typeDetail
        );
        this.recordData = record;
        this.beforeLoading = false
        this.afterLoading = false
      });
    },
    /**
     * 表格 类名
     */
    tableRowClassName({ row, rowIndex }) {
      if (row.remark) {
        return "remark-row";
      }
      if (!row.remark) {
        return "success-row";
      }
    },

    /**
     * 保存此方案  点击
     */
    save() {
      this.dialogVisible = true;
    },

    /**
     * 保存此方案 确定
     */
    submitForm() {
      console.log("remark", this.remark);
      if (this.recordData === undefined){
        this.$message.error("编制与人员未进行调整，系统不能创建新方案。");
        return;
      }
      if (
        this.planName === "" ||
        this.planName === null ||
        this.planName === undefined
      ) {
        this.$message.error("请输入方案名称");
        return;
      } else if (this.planName.length > 100) {
        this.$message.error("方案名称过长");
        return;
      } else if (this.remark != undefined) {
        if (this.remark.length > 300) {
          this.$message.error("备注过长");
          return;
        }
      }
      var params = {
        planName: this.planName,
        planCode: this.planCode,
        status: "0",
        tempId: this.tempId,
        remark: this.remark,
      };
      if (this.planId) {
        params = { ...params, id: this.planId };
        updatePlan(params).then((res) => {
          localStorage.removeItem("tempId");
          localStorage.removeItem("version");
          this.$router.push({
            path: "/plans",
            query: {},
          });
        });
      } else {
        savePlan(params).then((res) => {
          localStorage.removeItem("tempId");
          localStorage.removeItem("version");
          this.$router.push({
            path: "/plans",
            query: {},
          });
        });
      }

      // this.$refs["form"].validate((valid) => {
      //   console.log(valid);
      //   if (valid) {
      //     this.dialogVisible = false;
      //
      //   }
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.plans-wrap {
  display: flex;

  .plans-left {
    flex: 1;
    width: 350px;

    .plans-left-title {
      margin-top: 10px;
      height: 40px;
    }

    .plans-left-content {
      margin-top: 10px;

      &::v-deep .el-table {
        overflow: auto;
        border: 1px solid #ebf2fa;

        td:first-child {
          background-color: #e1edfb;
          font-weight: bold;
          color: #0d1053;
        }

        .success-row {
          background: #ecf5fe;
        }

        .success-row .orgNameCss:hover {
          color: #981515;
        }

        .remark-row td {
          background: #c5ddf9;
        }

        .remark-row td:first-child {
          background: #aed0f5;
        }
      }

      /*滚动条样式*/
      ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 12px;
      }

      ::-moz-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 12px;
      }

      ::-ms-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 12px;
      }

      ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 60px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
        background: #8bb9eb;
      }

      ::-moz-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 60px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
        background: #8bb9eb;
      }

      ::-ms-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 100px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
        background: #8bb9eb;
      }

      ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
      }

      ::-moz-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
      }

      ::-ms-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
      }
    }
  }

  .plans-center {
    flex: 1;
    margin-left: 30px;
    width: 33%;

    &::v-deep .el-table {
      overflow: auto;
      border: 1px solid #ebf2fa;

      td:first-child {
        background-color: #f2fae5;
        font-weight: bold;
        color: #063124;
      }

      .success-row {
        background: #f2fae5;
      }

      .remark-row td {
        background: #d8edac;
      }

      .remark-row td:first-child {
        background: #d2ea9e;
      }
    }

    /*滚动条样式*/
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 12px;
    }

    ::-moz-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 12px;
    }

    ::-ms-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 12px;
    }

    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 60px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
      background: #d1e6a5;
    }

    ::-moz-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 60px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
      background: #d1e6a5;
    }

    ::-ms-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 100px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
      background: #d1e6a5;
    }

    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
      border-radius: 0;
      background: rgba(0, 0, 0, 0);
    }

    ::-moz-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
      border-radius: 0;
      background: rgba(0, 0, 0, 0);
    }

    ::-ms-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
      border-radius: 0;
      background: rgba(0, 0, 0, 0);
    }
  }

  .plan-right {
    flex: 1;
    margin: 0 30px;
    margin-right: 0;
    width: 33%;

    .plan-right-title {
      margin-top: 10px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .plan-right-content {
      .record-wrap {
        height: 400px;
        overflow: auto;
        border: 1px solid rgba(0, 0, 0, 0.4);

        .record-list {
          border-bottom: 1px solid rgba(0, 0, 0, 0.4);
          margin: 5px;
          display: flex;

          &:last-child {
            padding-bottom: 0;
          }
          & > span {
            display: inline-block;
            margin-top: 10px;
            width: 20px;
          }

          .item-list {
            flex: 1;
            display: flex;
            flex-direction: column;

            span {
              margin: 10px 0;
            }
          }
        }
      }

      .el-descriptions {
        margin-top: 10px;
      }

      .footer {
        &::v-deep .el-upload {
          margin-top: 10px;
        }

        .footer-title {
          font-size: 14px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
